<template>
  <px-drawer v-model="drawerVisible" :close-on-click-modal="false" :title="title" width="600px" destroy-on-close append-to-body @close="handleClose">
    <Edit v-if="props.type === 'edit'" ref="editRef" :point="props.point" />
    <Detail v-else :point="props.point" />
    <template #footer>
      <div class="dialog-footer">
        <template v-if="props.type === 'edit'">
          <px-button type="primary" @click="handleSubmit">确 定</px-button>
          <px-button @click="handleClose">取 消</px-button>
        </template>
        <template v-else>
          <px-button type="primary" @click="handleClose">关 闭</px-button>
        </template>
      </div>
    </template>
  </px-drawer>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

import Edit from "./Edit.vue";
import Detail from "./Detail.vue";
import type { PropsTypeForDrawer, EmitsTypeForDrawer } from "../type";

const props = defineProps<PropsTypeForDrawer>();
const emits = defineEmits<EmitsTypeForDrawer>();

const editRef = ref(null);
const drawerVisible = ref(true);

const title = computed(() => {
  if (props.type === "detail") return "点位详情";
  return "编辑点位";
});

const handleSubmit = () => {
  if (editRef.value) {
    editRef.value.updateInfo();
  }
};
const handleClose = () => {
  emits("close");
  emits("refresh");
};
</script>
